import { useRequest } from "ahooks";
import { useModel, useParams } from "@umijs/max";
import { Button, Skeleton, Typography } from "antd";
import { formatDateTime } from "common/utils/utils";
import { Fragment } from "react";
import DataViewer from "common/component/DataViewer";
import AddDiffBtn from "@/components/AddDiffBtn";
import { DiffOutlined } from "@ant-design/icons";
import {
  evaluationComposeV1ControllerShow
} from "@/services/auto/evaluationCompose";

export default function Evaluation(){
  // const {data: globalConfigData} = useModel('global-config', ({data})=>({data}));

  const {uuid} = useParams();

  const {data, loading, error} = useRequest(()=>evaluationComposeV1ControllerShow({uuid: uuid!}),{
    ready: !!uuid,
  })

  return <div className="center-container pt-[16px]">
    {(()=>{
      if(!data || loading){
        return <Skeleton paragraph={{rows: 10}} />
      }
      return  <Fragment>
        <div className="flex">
          <div className="flex-1 min-w-0 mr-[16px]">
            <div className="flex items-center mb-[16px]">
              <Typography.Title className="mb-0" level={2} ellipsis={{rows: 2,tooltip: true}}>
                {data.title}
              </Typography.Title>
            </div>
            <Typography.Paragraph type="secondary">
              耳机：{data.earbudsEvaluation.title} {data.earbudsEvaluationDataGroup}
            </Typography.Paragraph>
            {data.soundSourceEvaluation && <Typography.Paragraph type="secondary">
              音源: {data.soundSourceEvaluation.title} {data.soundSourceEvaluationDataGroup}
            </Typography.Paragraph>}
            <Typography.Text type="secondary">
              {formatDateTime(data.updateTime)}
            </Typography.Text>
            <div className="mt-[16px]">
              <AddDiffBtn evaluationComposeUuid={data.uuid}>
                <Button className="px-[2px]" size="small" type="text" icon={<DiffOutlined />}>
                  <span>添加对比</span>
                </Button>
              </AddDiffBtn>
            </div>
          </div>
        </div>
        <div className="my-[16px]">
          {
            data.datas.map(item=>{
              return <DataViewer
                  key={item.project.uuid}
                  datas={item.children}
                  project={item.project}
                  // targets={globalConfigData.targets}
              />
            })
          }
        </div>
      </Fragment>
    })()}
  </div>
}
